<template>
  <div>
    <h3>防区视频添加</h3>
    <div id="content">
      <div id="areas">
        <h4>防区选择</h4>
        <ul v-for="layoutPicsItem,layoutPicsIndex in layoutPics" >
            <span class="glyphicon" :class="[layoutPicsItem.open ? down : right]" aria-hidden="true" @click="openFold(layoutPicsItem)" ></span>
            <span @click="openFold(layoutPicsItem)">{{layoutPicsItem.name}}</span>
            <ul v-for="AreaItem,AreaIndex in config_armAreas"  
              v-show="layoutPicsItem.open" v-if="AreaItem.l==layoutPicsIndex" 
              @click="chooseArea(AreaIndex)" 
              :class="{selected:AreaIndex == AreaChoosedIndex}">
                <span>{{AreaIndex + ' 号防区'}}</span>
            </ul>
        </ul>
      </div>
        
      <div id="passway">
        <h4>通道选择</h4>
        <ul v-for="NVRItem, NVRIndex in NVRS" >
            <span class="glyphicon" :class="[ NVRItem.open ? down : right ]" aria-hidden="true" @click="openFold(NVRItem)" ></span>
            <span @click="openFold(NVRItem)">{{ NVRItem.ip }}</span>
            <ul v-show="NVRItem.open">
              <li v-for="channel_id in NVRItem.channels"  @click="selectChannel( NVRItem.ip, channel_id )"
              :class="{selected:NvrChoosedIP == NVRItem.ip && NvrChoosedChannelID == channel_id }">
               > {{ channel_id }} </li>
            </ul>
        </ul>
      </div>
      <button @click="addChannel" class="btn btn-info" style="position: relative;top: 220px; margin: 2%;">添加
        <span class="glyphicon glyphicon-forward"></span>
      </button>
      <div id="config">
        <h4>已添加视频</h4>
        <table>
          <thead>
            <tr>
              <th>楼层</th>
              <th>防区</th>
              <th>NVR</th>
              <th>视频通道</th>
              <th>删除</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="( channelConfig, channel ) in configuredChannels" >
              <td>{{ channelConfig.layer_name }}</td>
              <td>{{ channelConfig.arm_area_idx }}</td>
              <td>{{ channelConfig.nvr_ip }}</td>
              <td>{{ channelConfig.channel_id }}</td>
              <td @click="deleteChannelConfig( channel )" >删除</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div ref="video_container"  >
    </div>
    <div id="footer" >
        <router-link tag="button" to="setArea" class="btn btn-primary" @click.native="$store.commit('setStep',5)"> 上一步</router-link>
        <router-link tag="button" to="finish" class="btn btn-primary" @click.native="$store.commit('setStep',7); $store.dispatch( 'finish' )"> 完成配置</router-link>    
    </div>

  </div>
</template>

<script>
import { clickLogin , clickGetAllChannels, initHikvision }  from '@/common/hikvision'

export default {
  data(){
    return {
      down: 'glyphicon-chevron-down',
      right: 'glyphicon-chevron-right',
      AreaChoosedIndex: null,
      NvrChoosedIP: null,
      NvrChoosedChannelID: null,
    }
  },
  mounted(){
  },
  computed: {
      layoutPics(){
        return this.$store.state.layoutPic;
      },

      config_armAreas(){
        return this.$store.state.arm_areas;
      },
      configuredChannels(){
        return this.$store.state.channels;
      },
      NVRS(){
        return this.$store.state.nvrs;
      }
  },
  methods:{
    addChannel(  ){
      var channel = this.NvrChoosedIP + "#" + this.NvrChoosedChannelID;
      var arm_area_idx = this.AreaChoosedIndex;
      var layers = this.layoutPics;
      console.log( layers );
      var layer_idx = this.config_armAreas[arm_area_idx].l;
      console.log( "add Channel: ", channel , " to arm_area_idx : ", arm_area_idx );
      this.$set( 
        this.configuredChannels,  
        channel, 
        { 
          layer_name: layers[layer_idx].name , 
          arm_area_idx: arm_area_idx, 
          nvr_ip:  this.NvrChoosedIP, 
          channel_id: this.NvrChoosedChannelID 
        }
        );
      console.log( this.configuredChannels );
    },

    deleteChannelConfig( channel ){
      this.$delete( this.configuredChannels, channel );
    },

    openFold(item){
      if(!item.open){
          this.$set(item, 'open', true);
      }else{
          this.$set(item, 'open', false);
      }
    },

    chooseArea( AreaIndex){
      this.AreaChoosedIndex = AreaIndex;
    },
    selectChannel( ip, id ){
      this.NvrChoosedIP = ip;
      this.NvrChoosedChannelID = id;
    }
  }
}
</script>

<style scoped>
h3{
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
}
h4{
  background-color: #0087da;
  height: 30px;
  line-height: 30px;
  font-size: 22px;
  text-align: center;
  color: white;
}
#content{
  width: 90%;
  margin: 0 auto;
  height: 540px;
  background-color:#f1f1f1;
  overflow: auto;
  padding: 10px;
}
#content ul{
  line-height: 30px;
  font-size: 16px;
  padding-left: 20px;
}

#content table{
  width: 100%;
}

#content table th,#content table td{
  text-align: center;
  border-bottom: 1px solid #2f2f2f;
  line-height: 30px;
  height: 30px;
  font-size: 16px;
}




#areas{
  vertical-align: top;
  display: inline-block;
  width: 15%;
  height: 500px;
}

ul:hover{
  cursor: pointer;
}
#passway{
  vertical-align: top;
  display: inline-block;
  width: 15%;
  height: 500px;
}
#config{
  vertical-align: top;
  display: inline-block;
  width: 40%;
  height: 500px;
}

.selected{
  background-color: #9ce283;
}


#footer{
    margin: 20px auto;
    width: 600px;
    text-align: center;
}
#footer button{
    margin: 0px 20px;
}
</style>
